/* =============================================================
 * h5_port_select.js v1.1.0
 * =============================================================
 * Original written by Ysy
 * =============================================================
 * Date 01/08/2019
 * ============================================================ */


(function (factory) {
    "use strict";
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(jQuery);
    }
}(function ($) {

    let PortSelect = function (element, options) {
        this.options = $.extend({}, $.fn.portSelect.defaults, options);
        this.$element = $(element);
        this.$main = $(this.options.main);
        this.$search = $(this.options.search);
        this.$right = $(this.options.right);
        this.$history = $(this.options.history);
        this.$hot = $(this.options.hot);
        this.$items = $(this.options.items);
        this.source = this.options.source;
        this.aside = $("." + this.options.class).asideUi({
            position: "right",
        });
        this.listen();
    };

    PortSelect.prototype = {

        constructor: PortSelect,

        render: function (data) {// 渲染
            // 显示文本或数据
            this.displayText(data);

            // 右侧导航栏
            this.$main.append(this.$right);
            // header查询框
            this.$main.append(this.$search);
            // 历史记录
            this.$main.append(this.$history);
            // 热门
            this.$main.append(this.$hot);
            // 数据列表
            this.$main.append(this.$items);
            $("." + this.options.class).html(this.$main);

            // 显示动态效果
            this.show();
        },

        displayText: function (data) {// 显示文本或数据

            let rightItems = data.right ? data.right : this.options.rightDefault;
            let html = "";
            $.each(rightItems, (index, value) => {
                html += "<span>" + value + "</span>";
            });
            this.$right.html(html);

            if (data.history) {
                let html = "";
                $.each(data.history, (index, value) => {
                    html += "<div data-id='" + value.id + "'>" + value.text + "</div>";
                });
                this.$history.find(".content").html(html);
            }

            if (data.hot) {
                let html = "";
                $.each(data.hot, (index, value) => {
                    html += "<div data-id='" + value.id + "'>" + value.text + "</div>";
                });
                this.$hot.find(".content").html(html);
            }

            if (data.items) {
                let html = "";
                $.each(data.items, (index, value) => {
                    html += "<div class='title right_" + value.id + "'>" + value.id + "</div><div class='port_item'>";
                    $.each(value.list, (idx, val) => {
                        html += "<div data-id='" + val.id + "'>" + val.text + "</div>";
                    });
                    html += "</div>";
                });
                this.$items.html(html);
            }
        },

        show: function () {
            this.aside.toggle();
        },

        hide: function () {
            this.aside.toggle();
            this.destroy();
        },

        listen: function () {
            this.$element
                .on("click", $.proxy(this.init, this));

            this.$history
                .on("click", ".content div", $.proxy(this.select, this));

            this.$hot
                .on("click", ".content div", $.proxy(this.select, this));

            this.$items
                .on("click", ".port_item div", $.proxy(this.select, this));

            this.$right
                .on("click", "span", $.proxy(this.scroll, this));
        },

        init: function () {
            if ($.isFunction(this.source)) {
                this.source($.proxy(this.process, this));
            } else if (this.source) {
                this.render(this.source);
            }
        },

        select: function (e) {
            let text = $(e.target).text();
            this.$element.text(text);
            this.hide();
        },

        scroll: function (e) {
            let text = $(e.target).text();
            let element = this.$items.find(".right_" + text);
            if (!element || Object.is(element.length, 0)) return;
            let top = element.offset().top;
            $("." + this.options.class).animate({scrollTop: top}, 500);
        },

        process: function (data, that, pageNum) {
            this.render(data);
        },

        destroy: function () {
            this.$main.detach();
        },
    };

    let old = $.fn.portSelect;

    $.fn.portSelect = function (options) {
        return new PortSelect(this, options);
    };

    $.fn.portSelect.defaults = {
        main: "<div class='port_select_ysy'></div>",
        search: "<div class='port_search'>" +
        "        <div class='port_search_wrap'>" +
        "            <svg class='icon svg-icon' aria-hidden='true'>" +
        "                <use xlink:href='#iconicon-'></use>" +
        "            </svg>" +
        "            <input placeholder='请输入港口名称'/>" +
        "        </div>" +
        "    </div>",
        right: "<div class='port_right'></div>",
        history: "<div>" +
        "           <div class='title'>" +
        "               <span>历史选择港口</span>" +
        "           </div>" +
        "           <div class='content'>" +
        "           </div>" +
        "         </div>",
        hot: "<div>" +
        "       <div class='title'>" +
        "           <span>热门港口</span>" +
        "       </div>" +
        "       <div class='content'>" +
        "       </div>" +
        "     </div>",
        items: "<div></div>",
        source: {
            history: [],
            hot: [],
            items: [],
            right: [],
        },
        class: "ui-aside",
        rightDefault: ["hot", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
    };

    $.fn.portSelect.Constructor = PortSelect;

    $.fn.portSelect.noConflict = function () {
        $.fn.portSelect = old;
        return this;
    };
}));
